* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #111;

}

.caculator {
	width: 353px;
	background-color: rgb(232, 232, 232);
	margin: 20px auto;
	/* border: 5px #000 solid; */
	font-size: 45px;
}

.display p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

/* .display-wraper .input #display-in{
	direction: ;
} */
table {
	border: 1px rgb(198, 197, 197) solid;

	border-collapse: collapse;
	width: 100%;
	line-height: 77px;
	table-layout: fixed;
}

table tr td {
	border: 1px rgb(198, 197, 197) solid;
	text-align: center;
	cursor: pointer;
}

td:hover {
	background-color: rgb(190, 190, 190) !important;
}

table tr:nth-child(n+3) td:nth-child(-n+3) {
	background-color: rgb(255, 255, 255);
}

.caculator .display-wraper {
	height: fit-content;
	padding: 20px 5px
}

.caculator .display {
	height: 60px;
	width: 100%;
	text-align: right;
	/* line-height: 160px; */
	cursor: auto;
	/* max-width: 352px; */
	overflow: hidden;
	/* direction: rtl; */
}
.display-wraper .input #display-in{
	width: 100%;
	height: 100%;
	/* direction: rtl; */
}
.blinker {
	-webkit-animation-name: blinker;
	animation-name: blinker;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	display: inline-block;
	width: 2px;
	height: 50px;
	/* margin-left: 10px; */
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
	background: rgb(0, 122, 214);
	vertical-align: sub;
}

@-webkit-keyframes blinker {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes blinker {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.display-wraper .output {
	margin: 0 auto 20px auto;
	font-size: 28px;
	color: rgb(102, 102, 102);
	height: fit-content !important;
}